<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../res/layui/css/layui.css">
</head>
<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-header">音乐列表</div>
        <div class="layui-card-body">
            <table id="musiclist" lay-filter="musicFilter"></table>
        </div>
    </div>
</div>

<script src="../res/layui/layui.js"></script>
<script>
    layui.use(function () {
        //获取模块对象
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;

        //为表格绑定行工具()单元格事件
        table.on('tool(musicFilter)', function (row) {
            console.log(row)
            if(row.event==='details'){
                layer.open({
                    type:1,
                    title:'歌曲详情',
                    shade:0.6,
                    shadeClose:true,
                    maxmin:true,
                    anim:0,
                    content:$('#music-details-dialog'),
                    success : function (layero,index){
                        $.get('/music/details',{id:row.data.id},function (resp) {
                            console.log(resp,"=====")
                            //如果服务端正常返回数据了则将数据在表格中渲染
                            if(resp.code === 0){
                                layero.find('#musicName').text(resp.data.name)
                                layero.find('#singerName').text(resp.data.singer)
                                layero.find('#style').text(resp.data.style)
                                layero.find('#albumName').text(resp.data.album.name)
                                layero.find('#company').text(resp.data.album.company)
                                //对时间格式化处理
                                let date = layui.util.toDateString(resp.data.publishTime,"yyyy-MM-dd")
                                layero.find('#publishTime').text(date)
                                //持续时长
                                layero.find('#duration').text(fmtTime(resp.data.duration))
                                //设置封面图
                                layero.find('.coverImg').prop('src',resp.data.album.pic)
                                //为播放器指定播放地址，实现试听
                                layero.find('.shiting').attr('src',resp.data.url)
                            }
                        })

                    }
                });
            }else if(row.event==='edit'){
                layer.msg('编辑')
            }else if(row.event==='del'){
                //请求服务端实现删除功能
                layer.confirm('确定要删除吗？', {icon: 3}, function (index) {
                    $.ajax({
                        type: 'delete',
                        url: '/music/del',
                        data: {id: row.data.id},
                        success: function (resp) {
                            if (resp.code === 0) {
                                layer.msg('删除成功')
                                //刷新表格
                                table.reload('musiclist')
                            } else {
                                layer.msg(resp.msg, {icon: 2})
                            }
                        }
                    })
                })
            }
        })

        //为表格绑定头工具事件

        //数据表格渲染
        table.render({

            elem: '#musiclist',  //绑定table元素（使用id绑定table元素）
            url: '/music/list', //服务端数据接口
            toolbar:'#toolbar',  //添加头部工具条
            page: {
                theme: '#1E9FFF',
                limit:5,                //每页显示记录数
                limits:[5,10,15,20,30]  //每页显示的记录数数组
            }, //开启分页
            cols:[[
                {type: 'checkbox', width:50},
                {type:'numbers',title:'序号'},
                {field: 'name',title: '歌曲名'},
                {field: 'singer',title: '歌手'},
                {field:'style',title: '风格'},
                {title:'时长',templet:'<div>{{fmtTime(d.duration)}}</div>'},
                {title: '标签',templet: function (d){
                    //判断tags字段是否为空，为空则返回替代文本
                        if(!d.tags)return'无';
                    //获取使用","作为分隔将字符串转换为数组
                        let tags = d.tags.split(",");
                        let html='';
                        tags.forEach(e=>{
                            html+='<span class="layui-badge layui-bg-blue">'+e+'</span>&nbsp';
                        })
                        return html;
                    }},
                {title:'操作',templet:'#rowTools',width:280}
            ]]
        })


    })

    //将秒钟单位转换为mm:ss格式
    function fmtTime(seconds){
        //根据提供的时间毫秒值转换为日期对象
        let time = new Date(seconds*1000);
        //获取日期对象中的分和秒
        let m = time.getMinutes();
        let s = time.getSeconds();
        //转换为mm:ss格式
        m = m<10?'0'+m:m;
        s = s<10?'0'+s:s;
        return m+':'+s;
    }


</script>
<!--自定义头工具栏-->
<script id="toolbar" type="text/html">
    <div class="layui-inline">
        <button class="layui-btn layui-btn-danger" lay-event="dels">
            <i class="layui-icon layui-icon-delete"></i>
            批量删除
        </button>
        <div class="layui-input-inline" style="width: 200px">
            <input type="text" class="layui-input" id="keyword" placeholder="请输入查询关键字">
        </div>
        <button class="layui-btn layui-btn-normal" lay-event="search">
            <i class="layui-icon layui-icon-search"></i>
            搜索
        </button>
    </div>
</script>
<!--自定义行工具栏-->
<script id="rowTools" type="text/html">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="details">
            <i class="layui-icon layui-icon-about"></i>
            详情
        </button>
        <button class="layui-btn layui-btn-warm layui-btn-xs" lay-event="edit">
            <i class="layui-icon layui-icon-edit"></i>
            编辑
        </button>
        <button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </div>
</script>

<!--试听按钮的页面模板-->
<script id="preview" type="text/html">
    <button class="layui-btn layui-btn-normal layui-btn-xs preview-btn" lay-event="playOrPause" data-playing="0"
            data-src="{{d.path}}">
        <i class="layui-icon layui-icon-play"></i>
    </button>
</script>


<!--歌曲详情弹层-->
<div id="music-details-dialog" style="display: none;padding: 20px">
    <table class="layui-table" lay-even>
        <tr>
            <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
            <td>歌曲名:</td>
            <td id="musicName">xxx</td>
            <td>专辑:</td>
            <td id="albumName">xxxx</td>
            <td>歌手：</td>
            <td id="singerName">xxxx</td>
        </tr>
        <tr>
            <td class="layui-elip">发行公司：</td>
            <td id="company" class="layui-elip">xxxx</td>
            <td class="layui-elip">发行时间</td>
            <td id="publishTime" class="layui-elip">xxxx</td>
            <td>歌曲风格</td>
            <td id="style">xxxx</td>
        </tr>
        <tr>
            <td>时长</td>
            <td id="duration">xxx</td>
            <td>试听</td>
            <td colspan="3">
                <audio src="" class="shiting" controls></audio>
            </td>
        </tr>
    </table>
</div>

<!--歌曲编辑弹层-->
<div id="music-edit-dialog" style="display: none;padding: 20px">
    <form class="layui-form" id="musicInfo" lay-filter="music-info">
        <input type="hidden" name="id">
        <table class="layui-table" lay-even>
            <tr>
                <td rowspan="3"><img src="" class="coverImg" width="100px" alt=""></td>
                <td>歌曲名:</td>
                <td><input type="text" name="name" class="layui-input"></td>
                <td>专辑:</td>
                <td>
                    <select name="aid" id="aid" lay-filter="select-filter">
                        <option value="0">匿名</option>
                    </select>
                </td>
                <td>歌手：</td>
                <td><input type="text" name="sname" class="layui-input"></td>
            </tr>
            <tr>
                <td>发行公司：</td>
                <td><input type="text" class="layui-input" name="company" readonly></td>
                <td>发行时间</td>
                <td><input type="text" class="layui-input" name="releasedate" readonly></td>
                <td>歌曲风格</td>
                <td>
                    <select name="style">
                        <option value="流行">流行</option>
                        <option value="摇滚">摇滚</option>
                        <option value="民谣">民谣</option>
                        <option value="电子">电子</option>
                        <option value="轻音乐">轻音乐</option>
                        <option value="爵士">爵士</option>
                        <option value="R&B">R&B</option>
                        <option value="乡村">乡村</option>
                        <option value="中国风">中国风</option>
                        <option value="说唱">说唱</option>
                        <option value="古典">古典</option>
                        <option value="世界音乐">世界音乐</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>文件大小</td>
                <td><input type="text" class="layui-input" name="size" readonly></td>
                <td>持续时长</td>
                <td><input type="text" class="layui-input" name="duration" readonly></td>
                <td>试听</td>
                <td>
                    <audio src="" class="shiting" controls></audio>
                </td>
            </tr>
            <tr>
                <td colspan="7">
                    <textarea class="layui-textarea" name="lrc"></textarea>
                </td>
            </tr>
        </table>
    </form>
</div>
</body>
</html>